<!--  -->
<template>
  <el-row class="page-products">
    <el-col
      :span="19"
      class="el-col-19"
    >
      <crumbs :keyword='keyword' />
      <Category
        :types='types'
        :areas='areas'
      />
      <div class="content-wrapper">
        <sort-option />
        <default-card />
      </div>
    </el-col>
    <el-col
      :span="5"
      class='el-col-5'
    >
      <a-map
        v-if="point.length"
        :width="230"
        :height="290"
        :point="point"
      />
    </el-col>
  </el-row>
</template>

<script>
import Crumbs from "@/components/products/crumbs.vue";
import Category from "@/components/products/category.vue";
import SortOption from "@/components/products/sortOption.vue";
import DefaultCard from "@/components/products/defaultCard.vue";
import aMap from "@/components/public/aMap.vue";

export default {
  components: {
    Crumbs,
    Category,
    SortOption,
    DefaultCard,
    aMap // 你继续写后面的吧  说不定就好了。./.??? r u kidding me?
  },
  data() {
    return {
      keyword: "故宫博物馆",
      types: [],
      areas: [],
      point: [] // 你这的值都没 这个值是哪来的啊  我都没看到呢  oo   行吧   那我就写后面的吧
    };
  },
  async asyncData(ctx) {
    let {
      status: areaStatus,
      data: { areas, types }
    } = await ctx.$axios.get(`http://cp-tools.cn/categroy/crumbs`, {
      params: {
        city: "北京",
        sign: "2887e552643c295f7301096e12134e8d"
      }
    });
    if (areaStatus === 200) {
      return {
        areas: areas.filter(item => item.type !== "").slice(0, 5),
        types: types.filter(item => item.type !== "").slice(0, 5)
      };
    }
  },

  computed: {},

  methods: {}
};
</script>
<style lang='scss' scoped>
.page-products {
  width: 1190px;
  height: 1000px;
  margin: 60px auto 0;
  .el-col-19 {
    height: 100%;
    // background-color: pink;
  }
  .el-col-5 {
    height: 100%;
    background-color: pink;
  }
}
.content-wrapper {
  margin-top: 10px;
  border: 1px solid #e5e5e5;
  padding: 0 23px;
}
</style>
